<template>
  <!-- 作为地图组件展示 -->
  <div class="GB">
    <!-- <topBar title="智慧集约化驾驶舱系统" :showTime="false" /> -->

    <!-- 右下角添加一个小地图。展示当前看到的是什么 -->


    <div class="gezi-box">
      <!-- <svg
          class="svg"
          width="800"
          height="385"
          viewBox="0 0 800 385"
          ref="svg"
          xmlns="http://www.w3.org/2000/svg"
        > -->
      <!-- <g class="svg-g"> -->
      <div class="box">
        <div class="in-box">
          <div class="in-box-two">
          <div
            class="line"
            v-for="(item, index) in gezi.data.coordinatePositionArrayList"
            :key="index"
          >
            <div
              class="content"
              v-for="(item2, index2) in item"
              :key="index2"
              :style="{ background: changColor(item2.type) }"
              @click="contentClick(item2)"
            >
              <div class="title" v-if="item2.type == 4">
                {{ item2.fictitiousPosition }}
              </div>
              <!-- <div class="title" v-if="item2.type == 4">
                {{ item2.x }}--{{ item2.y }}
              </div> -->
            </div>
          </div>
        </div>
        </div>
      </div>
      <!-- </g> -->
      <!-- </svg> -->
    </div>
  </div>
</template>

<script>
import topBar from "@/components/topBar.vue";
import { getAgvWmsData } from "@/api/mapData/index";
import * as gezi from "@/assets/response.js";
export default {
  // 组件传参
  props: {},

  data() {
    return {
      gezi: gezi.default.gezi,
    };
  },

  // 组件注册
  components: {
    topBar,
  },

  // 数据监听
  watch: {},

  // 计算属性
  compute: {},

  // created() {
  //   this.getAgvWmsData();
  // },

  // mounted() {
    created() {
      this.getAgvWmsData();
    document.addEventListener("DOMContentLoaded", () => {
      const zoomContent = document.querySelector(".box");
      let offsetX,
        offsetY,
        isDragging = false;
      let scale = 0.1;

      const zoomContainer = document.querySelector(".gezi-box");
      zoomContainer.addEventListener("wheel", event => {
        event.preventDefault(); // 防止默认的滚动行为

        // 根据滚轮方向调整缩放比例
        if (event.deltaY < 0) {
          scale *= 1.1; // 放大
        } else {
          scale /= 1.1; // 缩小
        }

        // 限制缩放范围，比如最小0.5倍，最大3倍
        scale = Math.min(Math.max(0.3, scale), 5);

        // 应用缩放变换
        zoomContent.style.transform = `scale(${scale})`;

        console.log(zoomContent, 'wwwwwwwwwww啪啪')
      });

      zoomContainer.addEventListener("mousedown", e => {
        
      console.log(zoomContent, e, '啪啪啪啪啪啪噼噼啪啪0000000-')
        offsetX = e.clientX - zoomContent.offsetLeft;
        offsetY = e.clientY - zoomContent.offsetTop;
        isDragging = true;
        zoomContent.style.position = "absolute"; // 确保元素是定位的
      });
      zoomContainer.addEventListener("mousemove", e => {
        if (isDragging) {
          const newLeft = e.clientX - offsetX;
          const newTop = e.clientY - offsetY;
          zoomContent.style.left = `${newLeft}px`;
          zoomContent.style.top = `${newTop}px`;
        }
      });
      zoomContainer.addEventListener("mouseup", e => {
        isDragging = false;
      });
    });

    // 监控浏览器宽度变化，动态调整宽度
    window.onresize = () => {
      this.changeWidth(window.innerWidth);
    };
  },

  // 方法实现
  methods: {

    contentClick(item2) {
      console.log(item2, "------[[[[[点击了啥");
    },
    getAgvWmsData() {
      const parms = {
        depotId: 100003,
      };
      getAgvWmsData(parms).then(res => {
        console.log(res, "[[[[[[[[[[[");
      });
    },
    // 根据type去改变方块底色
    changColor(type) {
      let color = "";
      if (type == 0) {
        color = '#f5f6f7'
        // "#f5f6f7"
        // "#06164A";
      } else if (type == 2) {
        color = "blue";
      } else if (type == 4) {
        color = "#f3bc86"
        // "#f1cb9a"
        // "#f3bc86"
        // "#f88123";
      }
      return color;
    },
    // 改变寬度
    changeWidth(a, b, c) {
      // 鼠标滚动，改变页面宽度，展示全部的小方格，并且不出现滚动条
      let width = window.innerWidth;
      // console.log(width);
      // this.$refs.box.style.width = width + "px";
      // this.$refs.box.style.overflow = "hidden";

      console.log(a, b, c, "[[[[[[[[[[[[[[[");

      // this.$refs.box.style.width = width + "px";
      // 根据屏幕的宽高及需要展示的数据量，动态调整宽度
      let boxWidth = 2000;
      let dataLength = this.gezi.data.length;
      let widthPerData = boxWidth / dataLength;
      //   this.$refs.box.style.width = widthPerData * dataLength + "px";

    },
  },
};
</script>

<style lang="scss" scoped>
.GB {
  height: 100vh;
  background-color: #f5f6f7;
}
// 鼠标保持点击
.gezi-box:active {
  cursor: grabbing;
}
.gezi-box {
  // 鼠标变成手型
  cursor: grab;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  width: 96vw;
  margin: 0 auto;

  height: 100vh;
  // calc(100vh - 130px);
  min-height: 500px;
  min-width: 500px;
  overflow: hidden; /* 防止页面滚动 */
  position: relative;
}
.box {
  margin: 0 auto;
 //width: 88%;
  height: 96%;
  //padding: 20px 20px;
  box-sizing: border-box;
 //background-color: #fff;
  //width: 2000px;
  //height: calc(100% - 10px);
  //overflow: scroll !important;
  //margin: 10px;
  transform-origin: center center;
  transition: transform 0.25s ease;
}
.in-box {
  padding: 20px;
  background: #fff;
}

.in-box-two {
  border-left: 1px solid #dedede;
  border-top: 1px solid #dedede;
}

.line {
  // width: 100%;
  background-color: #dedede;
  //padding: 0 20px 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    //margin: 0 1px 1px 0;
    border-right: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    background-color: rgb(196, 191, 191);
    //margin: 0 6px 6px 0;
    text-align: center;
  }
}
// 最后一个line
.line:last-child {
  //padding-bottom: 20px;
}
</style>
